<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ .title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body class="bg-gray-50">
    {{template "header.html" .}}
    
    <div class="container mx-auto px-4 py-8">
        <!-- 面包屑导航 -->
        <div class="mb-6">
            <div class="flex items-center text-sm text-gray-600">
                <a href="/nodes" class="hover:text-blue-600">节点管理</a>
                <svg class="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
                <a href="/nodes/{{ .node_id }}" id="breadcrumbNodeName" class="hover:text-blue-600">加载中...</a>
                <svg class="w-4 h-4 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
                <span class="text-gray-900 font-medium">IPv6绑定</span>
            </div>
        </div>

        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">IPv6地址绑定</h1>
                <p class="text-gray-600 mt-1" id="nodeNameDisplay">加载中...</p>
            </div>
            <div class="flex gap-2">
                <button onclick="refreshIPv6()" class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-lg transition flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    刷新
                </button>
                <button onclick="showAddIPv6Modal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    添加IPv6
                </button>
            </div>
        </div>

        <!-- IPv6列表 -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div id="ipv6Content" class="p-4">
                <p class="text-center py-8 text-gray-500 text-xs">加载中...</p>
            </div>
        </div>
    </div>

    <!-- 添加IPv6模态框 -->
    <dialog id="addIPv6Modal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-base mb-3">添加IPv6地址绑定</h3>
            <form id="addIPv6Form" class="space-y-3">
                <div class="form-control">
                    <label class="label"><span class="label-text">容器名称 *</span></label>
                    <select id="ipv6Container" required class="select select-bordered">
                        <option value="">选择容器</option>
                    </select>
                </div>
                <div class="form-control">
                    <label class="label"><span class="label-text">描述</span></label>
                    <input type="text" id="ipv6Description" class="input input-bordered" placeholder="IPv6用途说明">
                </div>
                <div class="modal-action">
                    <button type="button" onclick="closeIPv6Modal()" class="btn">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop"><button onclick="closeIPv6Modal()">close</button></form>
    </dialog>

    <script>
        const nodeId = parseInt({{ .node_id }});
        let containersData = [];

        $(document).ready(function() {
            loadNodeInfo();
            loadContainers();
            loadIPv6();

            $('#addIPv6Form').on('submit', function(e) {
                e.preventDefault();
                submitIPv6Form();
            });
        });

        function loadNodeInfo() {
            $.get(`/api/nodes/${nodeId}`, function(result) {
                if (result.code === 200) {
                    $('#breadcrumbNodeName').text(result.data.name);
                    $('#nodeNameDisplay').text(result.data.name || '未知节点');
                }
            });
        }

        function loadContainers() {
            $.get(`/api/containers/cache?node_id=${nodeId}`, function(result) {
                if (result.code === 200) {
                    containersData = result.data || [];
                }
            });
        }

        function loadIPv6() {
            $('#ipv6Content').html('<p class="text-center py-8"><span class="loading loading-spinner loading-md"></span></p>');
            
            $.get(`/api/ipv6?node_id=${nodeId}`, function(result) {
                if (result.code === 200) {
                    renderIPv6(result.data || []);
                } else {
                    $('#ipv6Content').html('<p class="text-center py-8 text-error">加载失败</p>');
                }
            });
        }

        function renderIPv6(data) {
            if (data.length === 0) {
                $('#ipv6Content').html('<p class="text-center py-8 text-gray-500 text-xs">暂无IPv6绑定</p>');
                return;
            }

            let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">';

            data.forEach(item => {
                const containerName = item.hostname || item.container_hostname;
                html += `
                    <div class="bg-white border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:shadow-md transition-all">
                        <div class="flex items-center justify-between mb-3">
                            <a href="/nodes/${nodeId}/containers/${containerName}" class="font-semibold text-gray-800 text-xs hover:text-blue-600 transition">
                                ${containerName}
                            </a>
                            <button onclick="deleteIPv6(${item.id})" class="px-2 py-1 text-xs font-medium text-red-700 bg-red-50 hover:bg-red-100 border border-red-200 rounded transition">删除</button>
                        </div>
                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-md p-3 mb-2 border border-gray-200">
                            <p class="text-xs text-gray-600">IPv6地址</p>
                            <code class="text-xs font-mono text-gray-800 break-all mt-1 block">${item.public_ipv6 || item.ipv6_address}</code>
                        </div>
                        <div class="flex items-center justify-between text-xs">
                            <span class="px-2 py-0.5 text-xs font-medium text-gray-700 bg-gray-100 rounded">${item.interface || 'eth0'}</span>
                            <span class="text-gray-600">${item.description || '无描述'}</span>
                        </div>
                    </div>
                `;
            });

            html += '</div>';
            $('#ipv6Content').html(html);
        }

        function showAddIPv6Modal() {
            const containers = containersData.map(c => `<option value="${c.hostname}">${c.hostname}</option>`).join('');
            $('#ipv6Container').html('<option value="">选择容器</option>' + containers);
            document.getElementById('addIPv6Modal').showModal();
        }

        function closeIPv6Modal() {
            document.getElementById('addIPv6Modal').close();
            $('#addIPv6Form')[0].reset();
        }

        function submitIPv6Form() {
            const data = {
                node_id: nodeId,
                container_hostname: $('#ipv6Container').val(),
                description: $('#ipv6Description').val()
            };

            $.ajax({
                url: '/api/ipv6',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data),
                success: function(result) {
                    if (result.code === 200) {
                        showToast('success', 'IPv6绑定添加成功');
                        closeIPv6Modal();
                        loadIPv6();
                    } else {
                        showToast('error', result.msg);
                    }
                }
            });
        }

        function deleteIPv6(id) {
            if (!confirm('确定要删除此IPv6绑定吗？')) return;
            
            $.ajax({
                url: `/api/ipv6/${id}`,
                type: 'DELETE',
                success: function(result) {
                    if (result.code === 200) {
                        showToast('success', '删除成功');
                        loadIPv6();
                    } else {
                        showToast('error', result.msg);
                    }
                }
            });
        }

        function refreshIPv6() {
            loadIPv6();
        }

        function showToast(type, message) {
            const colors = {
                'success': 'bg-green-600',
                'error': 'bg-red-600',
                'info': 'bg-blue-600'
            };
            
            const toast = $(`
                <div class="fixed top-4 right-4 ${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-lg z-50">
                    ${message}
                </div>
            `);
            
            $('body').append(toast);
            
            setTimeout(() => {
                toast.fadeOut(300, function() { $(this).remove(); });
            }, 3000);
        }
    </script>

    {{template "footer.html" .}}
</body>
</html>

